import React, { Component, useEffect, useReducer,useState,useMemo } from 'react';


// 该组件是动态加载的，当渲染该组件时会发网络请求加载js文件
const OtherComponent = React.lazy(() => import('./A'));

function Demo (props) {
    const [flag,flagSet] = useState(false)


    return (
        <div className=''>
            <button onClick={() => {
                flagSet(!flag)
            }}>动态加载某一个组件</button>
            <React.Suspense fallback={'...'}>
                <div>
                    {flag ? <OtherComponent /> : null}
                    
                </div>
            </React.Suspense>            
            <button onClick={() => {
               import(/** webpackChunkName: "math" */ './math').then(math => {
                console.log(math.default.add(16, 26));
              });
            }}>动态加载某个js模块</button>
        </div>
      );
}

export default Demo;



